<template>
    <div>
        <div style="margin: 10px">
            显示边框
            <i-switch v-model="showBorder" style="margin-right: 5px"></i-switch>
            显示斑马纹
            <i-switch v-model="showStripe" style="margin-right: 5px"></i-switch>
            显示索引
            <i-switch v-model="showIndex" style="margin-right: 5px"></i-switch>
            显示多选框
            <i-switch v-model="showCheckbox" style="margin-right: 5px"></i-switch>
            显示表头
            <i-switch v-model="showHeader" style="margin-right: 5px"></i-switch>
            表格滚动
            <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch>
            <br>
            <br> 表格尺寸
            <Radio-group v-model="tableSize" type="button">
                <Radio label="large">大</Radio>
                <Radio label="default">中</Radio>
                <Radio label="small">小</Radio>
            </Radio-group>
        </div>
        <Row>
            <Input v-model="searchConName" placeholder="请输入关键字..." style="width: 200px" />
            <span @click="handleSearch" style="margin: 0 10px;">
                <Button type="primary" icon="search">搜索</Button>
            </span>
            <Button @click="handleCancel" type="ghost">取消</Button>
        </Row>
        <Row class="margin-top-10 searchable-table-con1">
            <Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 250 : ''" :size="tableSize" :data="tableData3" :columns="tableColumns3"></Table>
        </Row>
        <Modal v-model="modal1" width="1000">
            <p slot="header">
                <Icon type="information-circled"></Icon>
                <span>课程详情</span>
            </p>
            <div style="text-align:center">
                <Edit ref="child"></Edit>
            </div>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="save">保存</Button>
            </div>

        </Modal>
    </div>
</template>
<script>
import Edit from './edit.vue';
const editButton = (vm, h, currentRow, index) => {
    return h(
        'Button',
        {
            props: {
                type: currentRow.editting ? 'success' : 'primary',
                loading: currentRow.saving
            },
            style: {
                margin: '0 5px'
            },
            on: {
                click: () => {
                    vm.modal1 = true;
                    // vm.$Modal.info({
                    //     title: '课程详情',
                    //     closable: true,
                    //     scrollable: true,
                    //     width: 1000,
                    //     render: (h) => {
                    //         return h(Edit, {
                    //             ref: "child"
                    //         })
                    //     },
                    //     onOk: () => {
                    //         let mVm = this;
                    //         mVm.$refs['child'].handleSubmit('formValidate');
                    //     }
                    // });
                }
            }
        },
        currentRow.editting ? '保存' : '编辑'
    );
};
const deleteButton = (vm, h, currentRow, index) => {
    return h(
        'Poptip',
        {
            props: {
                confirm: true,
                title: '您确定要删除这条数据吗?',
                transfer: true
            },
            on: {
                'on-ok': () => {
                    vm.tableData3.splice(index, 1);
                }
            }
        },
        [
            h(
                'Button',
                {
                    style: {
                        margin: '0 5px'
                    },
                    props: {
                        type: 'error',
                        placement: 'top'
                    }
                },
                '删除'
            )
        ]
    );
};
export default {
    components: { Edit },
    data () {
        return {
            tableData3: [
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                    date: '2016-10-03'
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park',
                    date: '2016-10-01'
                },
                {
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park',
                    date: '2016-10-02'
                },
                {
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park',
                    date: '2016-10-04'
                },
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                    date: '2016-10-03'
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park',
                    date: '2016-10-01'
                },
                {
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park',
                    date: '2016-10-02'
                },
                {
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park',
                    date: '2016-10-04'
                }
            ],
            showBorder: false,
            showStripe: false,
            showHeader: true,
            showIndex: true,
            showCheckbox: false,
            fixedHeader: false,
            tableSize: 'default',
            modal1: false,
            modal_loading: false,
            searchConName: '',
            data: ''
        };
    },
    computed: {
        tableColumns3 () {
            let columns = [];
            if (this.showCheckbox) {
                columns.push({
                    type: 'selection',
                    width: 60,
                    align: 'center'
                });
            }
            columns.push({
                title: '操作',
                align: 'center',
                width: 190,
                key: 'handle',
                handle: ['edit', 'delete']
            });
            if (this.showIndex) {
                columns.push({
                    type: 'index',
                    width: 60,
                    align: 'center'
                });
            }
            columns.push({
                title: 'Date',
                key: 'date',
                sortable: true
            });
            columns.push({
                title: 'Name',
                key: 'name'
            });
            columns.push({
                title: 'Age',
                key: 'age',
                sortable: true,
                filters: [
                    {
                        label: 'Greater than 25',
                        value: 1
                    },
                    {
                        label: 'Less than 25',
                        value: 2
                    }
                ],
                filterMultiple: false,
                filterMethod (value, row) {
                    if (value === 1) {
                        return row.age > 25;
                    } else if (value === 2) {
                        return row.age < 25;
                    }
                }
            });
            columns.push({
                title: 'Address',
                key: 'address',
                filters: [
                    {
                        label: 'New York',
                        value: 'New York'
                    },
                    {
                        label: 'London',
                        value: 'London'
                    },
                    {
                        label: 'Sydney',
                        value: 'Sydney'
                    }
                ],
                filterMethod (value, row) {
                    return row.address.indexOf(value) > -1;
                }
            });
            return columns;
        }
    },
    created () {
        this.init();
    },
    methods: {
        init () {
            this.tableColumns3.forEach(item => {
                if (item.handle) {
                    item.render = (h, param) => {
                        let currentRowData = this.tableData3[param.index];
                        let children = [];
                        item.handle.forEach(item => {
                            if (item === 'edit') {
                                children.push(editButton(this, h, currentRowData, param.index));
                            } else if (item === 'delete') {
                                children.push(
                                    deleteButton(this, h, currentRowData, param.index)
                                );
                            }
                        });
                        return h('div', children);
                    };
                }
            });
            this.data = this.tableData3;
        },
        save () {
            const vm = this;
            vm.$refs['child'].handleSubmit('formValidate', function () {
                vm.modal1 = false;
            });
        },
        search (data, argumentObj) {
            let res = data;
            let dataClone = data;
            for (let argu in argumentObj) {
                if (argumentObj[argu].length > 0) {
                    res = dataClone.filter(d => {
                        return d[argu].indexOf(argumentObj[argu]) > -1;
                    });
                    dataClone = res;
                }
            }
            return res;
        },
        handleSearch () {
            this.tableData3 = this.search(this.data, {name: this.searchConName});
        },
        handleCancel () {
            this.tableData3 = this.data;
        }
    }
};
</script>
